<template>
    <div class="star" :class="starType">
      <span v-for="itemClass,index in itemClasses" :class="itemClass" class="star-item" :key="index"></span>
    </div>
</template>


<script type="text/ecmascript-6">
  const LENGTH = 5;
  const CLS_ON = 'on';
  const CLS_HALF = 'half';
  const CLS_OFF = 'off';
    export default {
//      props接收父级传过来的属性
      props: {
        size: {
          type: Number
        },
        score: {
          type: Number
        }
      },
//      computed 计算属性
      computed: {
        starType() {
          return 'star-' + this.size;
        },
        itemClasses() {
          let result = [];
          let score = Math.floor(this.score * 2) / 2;
          let hasDecimal = score % 1 !== 0;
          let integer = Math.floor(this.score);
          for (let i = 0; i < integer; i++) {
            result.push(CLS_ON);
          }
//          判断是否存在小数
          if (hasDecimal) {
            result.push(CLS_HALF);
          }
          while (result.length < LENGTH) {
            result.push(CLS_OFF);
          }
          return result;
        }
      }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .star
    font-size: 0
    .star-item
      display: inline-block
      background-repeat: no-repeat
    &.star-48
      .star-item
        width: 20px
        height: 20px
        margin-right: 22px
        background-size: 20px 20px
        &:last-child
          margin-right: 0
        &.on
          bg-image('images/star48_on')
        &.half
          bg-image('images/star48_half')
        &.off
          bg-image('images/star48_off')
    &.star-36
      .star-item
        width: 15px
        height: 15px
        margin-right: 6px
        background-size: 15px 15px
        &:last-child
          margin-right: 0
        &.on
          bg-image('images/star36_on')
        &.half
          bg-image('images/star36_half')
        &.off
          bg-image('images/star36_off')
    &.star-24
      .star-item
        width: 10px
        height: 10px
        margin-right: 3px
        background-size: 10px 10px
        &:last-child
          margin-right: 0
        &.on
          bg-image('images/star24_on')
        &.half
          bg-image('images/star24_half')
        &.off
          bg-image('images/star24_off')

</style>
